<style scoped>
    .operation_bar {
        margin: 88px 0px 16px;
        width: 100%;
        /*height: 138px;*/
        border: 1px solid #dddddd;
        padding: 16px 0px;
    }

    .account_info {
        margin-left: 10px;

    }

    .withdrawal {
        margin-left: 70px;
        color: #08b7f4;
    }

    .transaction_record {
        width: 100%;
    }

    .headImg {
        width: 88px;
        height: 88px;
        border-radius: 50%;
        background: url(../../images/headImg.png) no-repeat center center;
    }

    .account_item {
        padding: 0px 10px 0px 32px;
        display: table;
        border-right: 1px dotted #ccc;
        width: -webkit-fill-available;
    }

    .account_item dt {
        display: table-cell;
        vertical-align: middle;
    }

    .account_item dd {
        display: table-cell;
        vertical-align: middle;
    }

    .mT32 {
        margin-top: 32px;
    }

    .lh36 {
        line-height: 36px;
    }

    .lh48 {
        line-height: 48px;
    }

    .account_remain {
        border-right: 1px dotted #ccc;
        padding: 0px 32px;
    }

    .control_item {
        font-size: 16px;
        line-height: 36px;
        color: #999;
    }

    .control_item {
        padding: 0px 32px;
        line-height: 30px;
    }
</style>
<style>
    .account_item .clickable {
        color: #08b7f4!important;
    }

    .control_item .clickable {
        float: right;
        color: #08b7f4!important;
    }

    .title_main {
        height: 64px;
        line-height: 64px;
        border-bottom: 1px solid #dddddd;
    }

    .mT24 {
        margin-top: 24px;
    }
</style>
<template>
    <div class="home_page">
        <div class="operation_bar">
            <nt-row>
                <nt-col :span="8">
                    <dl class="account_item fix">
                        <dt>
                            <img :src="image_url" width="88" height="88" class="headImg">
                        </dt>
                        <dd>
                            <div class="account_info">
                                <describe-item class="f16" title="用户ID" :value="userId"></describe-item>
                                <describe-item class="f16 mT32 account_number" title="账户号" :value="email" :value_click_event="mailClick"></describe-item>
                            </div>
                        </dd>
                    </dl>
                </nt-col>
                <nt-col :span="9">
                    <div class="account_remain">
                        <describe-item class="f16 lh48" title="账户余额" value=""></describe-item>
                        <div>
                            <span class="f36">{{amount}}</span>
                            <span class="f16">美元</span>
                            <a href="javascript:;" class="withdrawal f16" @click="withdrawal">提现</a>
                        </div>
                    </div>
                </nt-col>
                <nt-col :span="7">
                    <div class="control_item">
                        <describe-item title="银行账户收益人备案" value="管理" :value_click_event="jumpToBeneficiary"></describe-item>
                        <describe-item title="银行卡" value="管理" :value_click_event="jumpToBankCard"></describe-item>
                        <describe-item title="亚马逊收款帐户" value="管理" :value_click_event="jumpToAmazon"></describe-item>
                    </div>
                </nt-col>
            </nt-row>
        </div>
        <div class="transaction_record">
            <nt-row class="title_main">
                <nt-col :span="24">交易记录</nt-col>
            </nt-row>
            <nt-table class="dialog_table mT24" :data="datas">
                <nt-table-column label="交易日期" prop='gmt_modified'>
                    <template slot-scope='scope'>
                        <template v-if="scope.row.gmt_modified">
                            <p>{{scope.row.gmt_modified}}</p>
                        </template>
                        <template v-else>
                            <p>-</p>
                        </template>
                    </template>
                </nt-table-column>
                <nt-table-column label="交易类型/账号" prop='type'>
                    <template slot-scope='scope'>
                        <template v-if="scope.row.bank_account_id">
                            <p>{{firendShowForType(scope.row.type)+firendShowForCurrency(scope.row,true)}}</p>
                            <p>账户号 : {{scope.row.bank_account_id}}</p>
                        </template>
                        <template v-else>
                            <p>-</p>
                        </template>
                    </template>
                </nt-table-column>
                <nt-table-column label="金额" prop='amount'>
                    <template slot-scope='scope'>
                        <template v-if="scope.row.amount">
                            <p>{{scope.row.amount + firendShowForCurrency(scope.row)}}</p>
                        </template>
                        <template v-else>
                            <p>-</p>
                        </template>
                    </template>
                </nt-table-column>
                <nt-table-column label="汇率" prop='exchange_rate'>
                    <template slot-scope='scope'>
                        <template v-if="scope.row.exchange_rate">
                            <p>{{scope.row.exchange_rate}}</p>
                        </template>
                        <template v-else>
                            <p>-</p>
                        </template>
                    </template>
                </nt-table-column>
                <nt-table-column label="手续费/实际到账" prop='inward_amount'>
                    <template slot-scope='scope'>
                        <template v-if="scope.row.inward_amount">
                            <p>手续费 : {{scope.row.fee + firendShowForCurrency(scope.row)}}</p>
                            <p>实际到账 : {{scope.row.inward_amount + firendShowForCurrency(scope.row,true)}}</p>
                        </template>
                        <template v-else>
                            <p>-</p>
                        </template>
                    </template>
                </nt-table-column>
                <nt-table-column label="余额" prop=''>
                    <template slot-scope='scope'>
                        <template v-if="scope.row.gmt_modified">
                            <p>-</p>
                        </template>
                        <template v-else>
                            <p>-</p>
                        </template>
                    </template>
                </nt-table-column>
                <nt-table-column label="状态" prop='status'>
                    <template slot-scope='scope'>
                        <template v-if="scope.row.status">
                            <p>{{firendShowForStatus(scope.row.status)}}</p>
                        </template>
                        <template v-else>
                            <p>-</p>
                        </template>
                    </template>
                </nt-table-column>
            </nt-table>

            <nt-pagination layout="prev, pager, next" :total="888" @current-change="selectPage" class="tC">
            </nt-pagination>
        </div>
    </div>
</template>

<script>
    import describeItem from "../common-componts/describe-item.vue";
    export default {
        components: {
            describeItem
        },
        data() {
            return {
                image_url: "http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg",
                userId: '',
                email: '',
                amount: '',
                datas: null,
                current_page: 1,
            }
        },
        methods: {
            firendShowForType(val) {
                switch (val) {
                    case 'AMAZON_PAYMENT':
                    case 'EBAY_PAYMENT':
                        return '充值 - ';
                    case 'WITHDRAW':
                        return '提现 - ';
                    case 'TRANSFER':
                        return '转账 - ';
                    case 'DEPOSIT':
                        return '存入 - ';
                    default:
                        break;
                }
            },
            firendShowForCurrency(val, isAboutType = false) {
                let tmp_currency = val.currency;
                if (isAboutType && val.type == 'WITHDRAW') {
                    tmp_currency = val.outward_currency;
                }
                if (tmp_currency == 'USD') {
                    return ' 美元';
                } else if (tmp_currency == 'CNY') {
                    return ' 人民币';
                } else {
                    return 'unknow';
                }
            },
            firendShowForStatus(val) {
                switch (val) {
                    case 'PENDING':
                        return 'PENDING';
                    case 'USER_CONFIRMED':
                        return 'USER_CONFIRMED';
                    case 'USER_CANCELED':
                        return 'USER_CANCELED';
                    case 'SUCCESS':
                        return 'SUCCESS';
                    case 'FAILED':
                        return 'FAILED';
                    default:
                        break;
                }
            }
            ,
            mailClick() {
            },
            //提现
            withdrawal() {
                this.$router.push('/main/extractMoney');
            },
            //跳转到收益人
            jumpToBeneficiary() {
                this.$router.push('/main/beneficiary-list');
            },
            //跳转到银行卡
            jumpToBankCard() {
                this.$router.push('/main/bankcard-list');
            },
            //跳转到亚马逊收款账户
            jumpToAmazon() {
                this.$router.push('/main/amazon-list');
            },
            //分页选择回调
            async selectPage(currentPage) {
                this.current_page = currentPage;
                let account_id = this.ctx.store.get('account_id');
                let transaction = await this.ctx.models.settlement.getTransactionsForAccountId({
                    'accountId': account_id,
                    'page': this.current_page,
                    'size': 10
                }, this.ctx);
                this.datas = transaction.data.content;
            }
        },
        async created() {
            let userInfo = await this.ctx.models.settlement.getUserInfo(this.ctx);
            this.userId = userInfo.data.userId;
            this.email = userInfo.data.email;
            let account_id = userInfo.data.easypay_account;
            this.ctx.store.set('account_id', account_id);

            let balance = await this.ctx.models.settlement.getBalanceForAccountId({
                'accountId': account_id,
            }, this.ctx);
            for (const item of balance.data) {
                if (item.currency == 'USD') {
                    this.amount = item.amount;
                    break;
                }
            }

            let transaction = await this.ctx.models.settlement.getTransactionsForAccountId({
                'accountId': account_id,
                'page': this.current_page,
                'size': 10
            }, this.ctx);
            this.datas = transaction.data.content;

        }
    }
</script>
<!--
<style scoped>
    .home_page {
        margin-top: 50px;
    }

    .operation_bar {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        width: 100%;
        height: 100px;
        border: 2px solid #DEDEDE;
    }

    .account_item {
        display: flex;
        align-items: center;
        margin-left: 10px;
        padding-right: 10px;
        height: 90px;
        border-right: 1px dashed #E5E5E5;
    }

    .account_remain {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        margin-left: 10px;
        padding-right: 100px;
        height: 90px;
        border-right: 1px dashed #E5E5E5;
    }

    .control_item {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        margin-left: 10px;
        padding-right: 10px;
        height: 90px;
    }

    .account_item>img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .account_info {
        margin-left: 10px;
    }

    .account_info>.account_number {
        margin-top: 5px;
    }

    .remain_content {
        display: flex;
        margin-top: 5px;
    }

    .remain {
        font-size: 1.5em;
    }

    .unit {
        margin-top: 6px;
    }

    .withdrawal {
        cursor: pointer;
        margin-top: 6px;
        margin-left: 60px;
        color: #62A8CB;
    }

    .transaction_record {
        margin-top: 50px;
        width: 100%;
    }
</style>-->